<template>
  <a-modal v-model:open="open"
           :keyboard="false"
           :mask-closable="false"
           width="100%"
           wrap-class-name="full-modal"
           @cancel="handleClose">
    <template #title>
      <div class="flex justify-center fz18" style="border-bottom: 1px solid #eee;padding: 15px;">{{form.xingMing}} - 船员资料详情</div>
    </template>
    <div class="content-body" style="padding: 10px 100px">
      <a-tabs v-model:activeKey="currentIndex" type="card" @tabClick="handleChangeTab">
        <a-tab-pane :key="1" tab="基本信息"></a-tab-pane>
        <a-tab-pane :key="2" tab="任解职记录"></a-tab-pane>
        <a-tab-pane :key="3" tab="船员证书"></a-tab-pane>
        <a-tab-pane :key="4" tab="船员动态"></a-tab-pane>
      </a-tabs>
      <div  v-show="currentIndex == 1"  tab="基本信息">
        <a-row :gutter="40">
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10"><div class="mr6 mb10"><span class="red mr2">*</span>船员中文姓名：</div><a-input v-model:value="form.xingMing" maxlength="100" placeholder="请填写"/></div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10"><div class="mr6 mb10">船员英文姓名：</div><a-input placeholder="请填写" v-model:value="form.yingWenMing" maxlength="100" /></div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10"><div class="mr6 mb10">性别：</div>
              <a-select class="w100" placeholder="请选择" v-model:value="form.xingBie">
                <a-select-option :value="item.name" :key="item.name" v-for="item in xbList">{{item.name}}</a-select-option>
              </a-select>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10"><div class="mr6 mb10">手机号：</div><a-input placeholder="请填写" v-model:value="form.shouJiHao" maxlength="100" /></div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10"><div class="mr6 mb10"><span class="red mr2">*</span>身份号：</div><a-input placeholder="请填写" v-model:value="form.shenFenHao" maxlength="100" /></div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10"><div class="mr6 mb10">出生日期：</div><a-date-picker class="w100" format="YYYY-MM-DD" value-format="YYYY-MM-DD" v-model:value="form.chuShengRiQi"  placeholder="请选择"/></div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10"><div class="mr6 mb10">船员分组：</div>
              <a-select class="w100" placeholder="请选择" v-model:value="form.fenZuId" @change="handleSelectFenzu">
                <a-select-option :value="item.id" :key="item.id" v-for="item in chuanboFenzuList">{{item.zuMing}}</a-select-option>
              </a-select>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10"><div class="mr6 mb10"><span class="red mr2">*</span>证书职位：</div>
              <a-select class="w100" placeholder="请选择" v-model:value="form.zhiWei">
                <a-select-option v-for="item in zhiweiList" :key="item.id" :value="item.zhiWeiMing">{{
                    item.zhiWeiMing
                  }}
                </a-select-option>
              </a-select>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10"><div class="mr6 mb10">证书等级：</div>
              <a-select class="w100" placeholder="请选择" v-model:value="form.zhengShuDengJi">
                <a-select-option :value="item.name" :key="item.name" v-for="item in zsdjList">{{item.name}}</a-select-option>
              </a-select>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10"><div class="mr6 mb10">籍贯：</div><a-input placeholder="请填写" v-model:value="form.jiGuan" maxlength="100" /></div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10"><div class="mr6 mb10">血型：</div>
              <a-select class="w100" placeholder="请选择" v-model:value="form.xueXing">
                <a-select-option :value="item.name" :key="item.name" v-for="item in cyxxList">{{item.name}}</a-select-option>
              </a-select>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10"><div class="mr6 mb10">民族：</div><a-input placeholder="请填写" v-model:value="form.minZu" maxlength="100" /></div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10"><div class="mr6 mb10">婚姻状况：</div>
              <a-select class="w100" placeholder="请选择" v-model:value="form.hunYin">
                <a-select-option :value="item.name" :key="item.name" v-for="item in hyzkList">{{item.name}}</a-select-option>
              </a-select>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10"><div class="mr6 mb10">宗教信仰：</div>
              <a-select class="w100" placeholder="请选择" v-model:value="form.zongJiaoXinYang">
                <a-select-option :value="item.name" :key="item.name" v-for="item in zjxyList">{{item.name}}</a-select-option>
              </a-select>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10"><div class="mr6 mb10">船员类型：</div>
              <a-select class="w100" placeholder="请选择" v-model:value="form.leiXing">
                <a-select-option :value="item.name" :key="item.name" v-for="item in cylxList">{{item.name}}</a-select-option>
              </a-select>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10"><div class="mr6 mb10">毕业院校：</div><a-input placeholder="请填写" v-model:value="form.biYeYuanXiao" maxlength="100" /></div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10"><div class="mr6 mb10">最高学历：</div>
              <a-select class="w100" placeholder="请选择" v-model:value="form.xueLi">
                <a-select-option :value="item.name" :key="item.name" v-for="item in zgxlList">{{item.name}}</a-select-option>
              </a-select>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10"><div class="mr6 mb10">专业：</div><a-input placeholder="请填写" v-model:value="form.zhuangYe" maxlength="100" /></div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10"><div class="mr6 mb10">英文水平：</div>
              <a-select class="w100" placeholder="请选择" v-model:value="form.yingYuShuiPing">
                <a-select-option :value="item.name" :key="item.name" v-for="item in yyspList">{{item.name}}</a-select-option>
              </a-select>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10"><div class="mr6 mb10">计算机水平：</div>
              <a-select class="w100" placeholder="请选择" v-model:value="form.jiSuanJiShuiPing">
                <a-select-option :value="item.name" :key="item.name" v-for="item in jsjspList">{{item.name}}</a-select-option>
              </a-select>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10"><div class="mr6 mb10">其他技能：</div><a-input placeholder="请填写" v-model:value="form.qiTaJiNeng" maxlength="100" /></div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10"><div class="mr6 mb10">身高（cm）：</div><a-input placeholder="请填写" v-model:value="form.shenGao" maxlength="100" /></div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10"><div class="mr6 mb10">体重（kg）：</div><a-input placeholder="请填写" v-model:value="form.tiZhong" maxlength="100" /></div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10"><div class="mr6 mb10">鞋号：</div><a-input placeholder="请填写" v-model:value="form.xieHao" maxlength="100" /></div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10"><div class="mr6 mb10">其他电话：</div><a-input placeholder="请填写" v-model:value="form.qiTaDianHua" maxlength="100" /></div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10"><div class="mr6 mb10">邮箱：</div><a-input placeholder="请填写" v-model:value="form.youXiang" maxlength="100" /></div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10"><div class="mr6 mb10">工作服号：</div><a-input placeholder="请填写" v-model:value="form.gongZuoHao" maxlength="100" /></div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10"><div class="mr6 mb10">紧急联系人：</div><a-input placeholder="请填写" v-model:value="form.jinJiLianXiRen" maxlength="100" /></div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10"><div class="mr6 mb10">紧急联系人电话：</div><a-input placeholder="请填写" v-model:value="form.jinJiDianHua" maxlength="100" /></div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10"><div class="mr6 mb10">紧急联系人地址：</div><a-input placeholder="请填写" v-model:value="form.jinJiDiZhi" maxlength="100" /></div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10"><div class="mr6 mb10">本人银行卡号：</div><a-input placeholder="请填写" v-model:value="form.kaHao" maxlength="100" /></div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10"><div class="mr6 mb10">开户行：</div><a-input placeholder="请填写" v-model:value="form.kaiHuHang" maxlength="100" /></div>
          </a-col>
          <a-col  class="gutter-row" :span="24">
            <div class="gutter-box fw mb10"><div class="mr6 mb10">备注：</div><a-textarea rows="8" placeholder="请填写" v-model:value="form.beiZhu" maxlength="1000" /></div>
          </a-col>
        </a-row>
      </div>
      <div  v-show="currentIndex == 2"  tab="任解职记录">
        <user-base-work ref="workRef"></user-base-work>
      </div>
      <div  v-show="currentIndex == 3"  tab="船员证书">
        <div class="mb20">
          <user-base-book-one ref="oneRef"></user-base-book-one>
        </div>
        <div class="mb20">
          <user-base-book-two ref="twoRef"></user-base-book-two>
        </div>
        <div class="mb20">
          <user-base-book-three ref="threeRef"></user-base-book-three>
        </div>
        <div class="mb20">
          <user-base-book-four ref="fourRef"></user-base-book-four>
        </div>
        <div class="mb20">
          <user-base-book-five ref="fiveRef"></user-base-book-five>
        </div>
      </div>
      <div v-show="currentIndex == 4" tab="船员动态"><user-base-dongtai ref="dongtaiRef"></user-base-dongtai></div>
    </div>
    <template #footer v-if="currentIndex == 1">
      <div class="flex justify-center pr ftp3">
        <a-button type="primary" @click="handleSubmit" :loading="addLoading" class="mr10">保存</a-button>
        <a-button type="default" @click="handleClose">取消</a-button>
      </div>
    </template>
    <template #footer v-else>
    </template>
  </a-modal>
</template>
<script setup>
import UserBaseDongtai from './UserBaseDongtai.vue'
import UserBaseWork from './UserBaseWork.vue'
import UserBaseBookFive from "./UserBaseBookFive.vue";
import UserBaseBookThree from "./UserBaseBookThree.vue";
import UserBaseBookOne from "./UserBaseBookOne.vue";
import UserBaseBookFour from "./UserBaseBookFour.vue";
import UserBaseBookTwo from "./UserBaseBookTwo.vue";
import UserBaseBookSix from "./UserBaseBookSix.vue";
const zhiweiList = ref([])
const workRef = ref({})
const oneRef = ref({})
const twoRef = ref({})
const threeRef = ref({})
const fourRef = ref({})
const fiveRef = ref({})
const dongtaiRef = ref({})

const currentIndex = ref(1)
const open = ref(false)
const emits = defineEmits(["success"])
const addLoading = ref(false)
const chuanboFenzuList = ref([])
const userState = useStore.userState()
const xbList = computed(() => userState.getParameterList('xb'))
const cyxxList = computed(() => userState.getParameterList('cyxx'))
const zjxyList = computed(() => userState.getParameterList('zjxy'))
const yyspList = computed(() => userState.getParameterList('yysp'))
const jsjspList = computed(() => userState.getParameterList('jsjsp'))
const zgxlList = computed(() => userState.getParameterList('zgxl'))
const zsdjList = computed(() => userState.getParameterList('zsdj'))
const cylxList = computed(() => userState.getParameterList('cylx'))
const hyzkList = computed(() => userState.getParameterList('hyzk'))

const form = ref({
  xingMing:"",
  yingWenMing:"",
  xingBie:null,
  shouJiHao:"",
  shenFenHao:"",
  chuShengRiQi:"",
  fenZu:"",
  fenZuId:null,
  zhiWei:null,
  jiGuan:"",
  zongJiaoXinYang:null,
  minZu:null,
  hunYin:null,
  xueXing:null,
  leiXing:null,
  zhengShuDengJi:null,
  biYeYuanXiao:"",
  xueLi:null,
  zhuangYe:"",
  yingYuShuiPing:null,
  jiSuanJiShuiPing:null,
  qiTaJiNeng:"",
  shenGao:"",
  nianling:"",
  tiZhong:"",
  xieHao:"",
  gongZuoHao:"",
  qiTaDianHua:"",
  youXiang:"",
  diZhi:"",
  jinJiLianXiRen:"",
  jinJiDianHua:"",
  jinJiDiZhi:"",
  biaoQian:"",
  beiZhu:"",
  kaHao:"",
  huMing:"",
  kaiHuHang:"",
  yinHangDaiMa:"",
  chiYouRenGuanXi:"",
  yongTu:"",
})
const handleChangeTab = (index)=>{
  if(index == 2){
    workRef.value.handleLoadData(form.value.id,form.value.xingMing)
  }

  if(index == 3){
    oneRef.value.handleLoadData(form.value.id,form.value.xingMing,form.value.chuShengRiQi)
    twoRef.value.handleLoadData(form.value.id,form.value.xingMing)
    threeRef.value.handleLoadData(form.value.id,form.value.xingMing)
    fourRef.value.handleLoadData(form.value.id,form.value.xingMing)
    fiveRef.value.handleLoadData(form.value.id,form.value.xingMing)
  }

  if(index == 4){
    dongtaiRef.value.handleLoadData(form.value.id,form.value.xingMing)
  }
}

const handleSelectFenzu = (e)=>{
  form.value.fenZu = chuanboFenzuList.value.find(c=>c.id == e).zuMing
}

const handleSubmit = async () => {
  try {
    addLoading.value = true

    if(!form.value.xingMing){
      useMessage().error("请输入船员姓名")
      addLoading.value = false
      return false;
    }
    /*if(!form.value.fenZuId){
      useMessage().error("请输入船员分组")
      addLoading.value = false
      return false;
    }*/
    if(!form.value.shenFenHao){
      useMessage().error("请输入身份号")
      addLoading.value = false
      return false;
    }
    if(!form.value.zhiWei){
      useMessage().error("请输入证书职位")
      addLoading.value = false
      return false;
    }
    if(form.value.shenFenHao.length < 15){
      useMessage().error("身份号长度不符")
      addLoading.value = false
      return false;
    }
    const resp = await useSaveUpdateChuanYuanKuApi(form.value)
    addLoading.value = false
    useMessage().success("添加成功!")
    handleClose()
    emits("success")
  }catch (e) {
    addLoading.value = false
    useMessage().error(e.msg)
  }
}

const handleLoadChuaboFenzuData = async () => {
  var res = await useLoadChuanYuanFenzuBiaoApi()
  chuanboFenzuList.value = res.data
}

const handleLoadZhiweiData = async () => {
  var res = await useLoadChuanBoZhiWeiBiaoApi()
  zhiweiList.value = res.data
}
const handleOpen = async (id)=>{
  open.value = true;
  await handleLoadChuaboFenzuData()
  await handleLoadZhiweiData()
  const resp = await useGetChuanYuanKuApi(id)
  form.value = resp.data
}

const handleChangeBtn = ()=>{
  tableData.value = showChecked.value ? tableDataAll.value : filterDataAll.value
}


const handleClose = ()=>{
  currentIndex.value = 1
  open.value = false
  oneRef.value.handleClear()
  twoRef.value.handleClear()
  threeRef.value.handleClear()
  fourRef.value.handleClear()
  fiveRef.value.handleClear()
}

defineExpose({
  handleOpen
})
</script>
<style lang="scss">
.full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    border-radius: 0;
    margin: 0;
  }
  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
    border-radius: 0;
    padding:0px;
  }
  .ant-modal-body {
    flex: 1;
  }
  .content-body{
    padding:20px 24px;
  }

  .gutter-box{margin-bottom: 10px;}
}
</style>
